<template>
  <div class="notice">
    <div class="content">
      <div class="header">
        <h1 class="title">{{noticeArray.title}}</h1>
        <p class="time">{{noticeArray.start_time}}</p>
      </div>
      <div class="notice-content">
        <p class="appell">亲爱的玩家：</p>
        <p class="detail">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{noticeArray.description}}</p>
      </div>
    </div>
    <div class="notice-footer">
      <a href="javascript:;" class="back" @click="back">返回列表</a>
      <a href="javascript:;" class="enter" @click=startGame(noticeArray.url)>进入游戏</a>
    </div>
    <loading-full></loading-full>
  </div>
</template>

<script type="text/ecmascript-6">
  import LoadingFull from '../common/loading-full/loading-full'
  import {startGame} from '../../assets/js/common'

  export default {
    data() {
      return {
        noticeArray: []
      }
    },
    created() {
      let id = this.$route.query.id
      //获取公告详情
      this.$http.get(`/game/index.php?m=Home&c=Api&a=getNotice&notice_id=${id}`).then((response) => {
        if (response.data.code === this.ERROR_OK) {
          this.noticeArray = response.data.data[0]
          this.Indicator.close()
        } else {
          this.Indicator.close()
          this.Toast({
            message: '服务器错误，请稍后再试',
            position: 'bottom'
          })
          this.$router.go(-1)
        }
      })
    },
    methods: {
      startGame,
      back() {
        this.$router.go(-1)
      }
    },
    components: {
      LoadingFull
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixin.styl"
  .notice
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    background #fff
    z-index 99
    .content
      padding 80px 32px 0 32px
      .header
        text-align center
        .title
          font-size 32px
          color #010101
        .time
          margin-top 16px
          font-size 24px
          color #999
      .notice-content
        .appell
          margin-top 62px
          font-size 28px
          color #333
        .detail
          margin-top 24px
          line-height 34px
          color #333
          font-size 26px
      .update-content
        margin-top 80px
        color #333
        .update-title
          font-size 28px
        .update-message
          margin-top 16px
          font-size 26px
    .notice-footer
      position absolute
      display inline-flex
      width 100%
      left 0
      bottom 0
      border-top 2px solid rgba(0, 0, 0, .2)
      text-align center
      z-index 10
      .back, .enter
        display inline-block
        flex 1
        height 88px
        line-height 88px
        font-size 32px
      .back
        color #333
        background #fff
      .enter
        color #fff
        background #2ECC40
</style>
